<!--
*@Author: QWP
*@Description: 公文查询
*@Date 2024-07-15 09:58
-->
<template>
  <a-layout
    class="f-h-100 s-bg-white">
    <u-search-header>
      <a-row
        class="f-margin-b10"
        justify="center">
        <a-input-search
          v-model:value="searchF.model.keywords"
          placeholder="文件名"
          enter-button
          size="large"
          style="width: 30%"
          @search="getSearch(1)" />
      </a-row>
    </u-search-header>
    <u-table-content style="overflow: auto">
      <a-list
        :grid="{ column: 1 }"
        :data-source="tabData"
        :loading="loading">
        <template #renderItem="{ item }">
          <a-list-item
            @click="viewDoc(item)"
            class="f-cursor">
            <a-row class="u-doc-search-title f-font-family f-margin-b10">
              {{ item.docabs }}
            </a-row>
            <a-row
              class="u-doc-search-content f-font-family f-margin-b10"
              v-if="item.contents">
              {{ item.contents }}
            </a-row>
            <a-row class="u-doc-search-desc f-font-family f-margin-b24">
              <span>发布者: {{ item.username }}</span>
              <span class="f-margin-l44">发布时间: {{ item.createtime }}</span>
            </a-row>
          </a-list-item>
        </template>
      </a-list>
    </u-table-content>
    <a-layout-footer style="background: #fff">
      <a-row justify="end">
        <u-page-nation
          v-model:pagination="pagenation"
          :hideOnSinglePage="true"
          @change="getSearch" />
      </a-row>
    </a-layout-footer>
  </a-layout>

  <!-- 编辑弹窗 -->
  <Edit
    v-model:open="showEcho"
    wrap-class-name="full-modal" />

  <!-- 文件预览 -->
  <u-dialog
    v-model:open="showEcho"
    wrap-class-name="full-modal"
    :destroyOnClose="true"
    :hideBtns="['submit']">
    <template v-if="fileUrl != ''">
      <UploadEcho
        :path="fileUrl"
        @echoClose="showEcho = false" />
    </template>
  </u-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch } from "vue";
import { useRoute, useRouter, onBeforeRouteUpdate, onBeforeRouteLeave } from "vue-router";
import { _IFormEl } from "@/components/common/form/interface";
import { Button, ColProps, FormItemProps, TableColumnProps } from "ant-design-vue";
import { CheckCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { numberC } from "@/util/common";
import { formatAmt } from "@/util/format.ts";
import dayjs from "dayjs";
import Edit from "./Edit.vue";
import { cloneDeep } from "lodash";
import UploadEcho from "@/views/common/UploadEcho.vue";
import * as dispatchApi from "@/service/officialDoc/publishDoc/index.ts";

const route = useRoute();
const router = useRouter();

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
});
const searchF = reactive({
  model: {
    keywords: "",
    status: 3,
  },
});

// 列表
const loading = ref<boolean>(false);
const tabData = ref<any[]>([]);
onMounted(() => {
  getSearch();
});

// 查询数据
const getSearch = async (current?: number) => {
  if (current == 1) {
    pagenation.current = 1;
  }
  loading.value = true;
  try {
    searchF.current = pagenation.current;
    searchF.size = pagenation.pageSize;

    const res = await dispatchApi.page(searchF);
    if (res.code == 0) {
      tabData.value = res.data.records;
      tabData.value.forEach((item) => {
        item.createtime = dayjs(item.createtime).format("YYYY-MM-DD");
      });
      pagenation.total = numberC(res.data.total);
    }
  } catch (error) {}
  loading.value = false;
};

// 编辑
let showEcho = ref<boolean>(false);
let fileUrl = ref<string>("");
const viewDoc = (data) => {
  fileUrl.value = data["filepath"] || "";
  showEcho.value = true;
};
</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
:deep(.u-doc-search-title) {
  font-weight: 400;
  font-size: 16px;
  color: #1890ff;
}
:deep(.u-doc-search-content) {
  font-weight: 400;
  font-size: 16px;
  color: #333333;
}
:deep(.u-doc-search-desc) {
  font-weight: 400;
  font-size: 14px;
  color: #666666;
}
</style>
